<!--  -->
<template>
  <div class="Channel-Information-Authentication-con">
    <a-carousel ref="carouselcon" :dots="carouselDots">
      <div class="carousel-item">
        <div class="carousel-item-data">
          <div class="item-row">
            <div class="title">
              <p-Tips
                :isShowIcon="true"
                iconType="sound"
                :isShowIconBorder="false"
                :showBorder="true"
                :showHelp="false"
                :iconTheme="'filled'"
                type="warning"
              >
                您尚未完成渠道法人身份验证，无法进行与注册户电子签约！可以尝试如下操作：</p-Tips
              >
            </div>
            <!-- <div class="title">您可以：</div> -->
          </div>
          <div class="item-row item-row-r">
            <div class="item-box">
              <div class="box-title">完成渠道法人身份认证</div>
              <div class="box-body">
                <div class="box-data-item">
                  ①上传法人身份证 <a-icon :type="upLoadFRSFZ.icon" :style="{ color: upLoadFRSFZ.color }" />
                </div>
                <div class="box-data-item">
                  ②法人实名手机认证 <a-icon :type="smsjrz.icon" :style="{ color: smsjrz.color }" />
                </div>
              </div>
              <a-button @click="authenticateEvent" type="primary" shape="round" class="btn-size"> {{config.btnLabel}} </a-button>
            </div>
            <div class="item-box">
              <div class="box-title">上传委托代征协议</div>
              <div class="box-body">
                <div class="box-data-item">上传与注册户签订的《委托代征协议》扫描版</div>
              </div>
              <a-button @click="goto(1)" type="primary" shape="round" class="btn-size"> 上传纸质委托代征协议 </a-button>
            </div>
          </div>

        </div>
      </div>
      <div class="carousel-item">
       <div class="carousel-item-data">
        <div class="item-row key-val">
          <div class="key">
            上传委托书：
          </div>
          <div class="val">

            <p-UpLoadFile
              :showHelp="false"
              ref="uploadFileModelwtdzxy"
              v-model="uploadFileModel"
              :config="upLoadConfig"
              :customRequestEvent="PUpLoadFileCustomRequestEvent"
            ></p-UpLoadFile>
          </div>
        </div>
        <div class="item-row key-val">
          <div class="key">有效期：</div>
          <div class="val"><a-range-picker v-model="uploadFileDate" :mode="mode2" @panelChange="handlePanelChange2" valueFormat="YYYY-MM" format="YYYY-MM" style="width: 100%;"/></div>
        </div>
        <div class="item-row item-row-line">
          <a-button v-if="showBack" type="" shape="round" class="btn-size btn-size-m" @click="goto(0)"> 返回 </a-button>
          <a-button type="primary" shape="round" class="btn-size btn-size-m" @click="saveFile"> 提交审核 </a-button>
        </div>
       </div>
      </div>
    </a-carousel>
  </div>
</template>

<script>
import getDataForDB from '@/api/qsbBusinessManagement'
const upLoadConfig = {
  // 此参数必填  上传路径
  dir: '/qsb/idCard/',
  // 此参数必填 表示要采用什么模式   可选的值： 单文件  多文件  身份证  all  ；  单文件 对应 card1 ；   多文件 对应  card3 ； 身份证  对应  card1（身份证正面）、card2（身份证反面）
  model: '单文件',
  // 此参数选填   此属性只在 model= 身份证 时 启用   默认值文false
  showBG: false,
  // 此参数选填  表示是否可编辑
  readonly: false,
  // 此参数选填   文件上传必填校验 默认为false 不校验   当值为true时进行强制校验  需要配合【getDataCheckRes】方法使用；
  // 方法【getDataCheckRes】的具体用法如: this.$refs.UpLoadFile.getDataCheckRes({ card1: "请上传身份证正面",card2: "请上传身份证反面", card3: "请上传附件"});
  // 其中 【getDataCheckRes】的参数辨识检验不通过时对应的提示信息；card1、card2、card3均可缺省，也可选填对应的字段    此参数可空
  required: true,
  tips: {
    card1: '上传委托代征协议',
    // card2: '上传委托代征协议',
  },
  // 此参数选填   要回显的数据 card1 card2 的值的格式为：{name:'',url:''} ;  card3 的值的格式为 [{name:'',url:''}，{name:'',url:''}]
  defaultFileList: {
    card1: { name: '', url: '' },
    // card2: { name: '', url: '' },
  },
  // 此参数集必填
  fielConfig: {
    // 允许上传的文件类型 当为空时表示不限制  默认为空
    //    可供选择类型：
    //          图片('jpg', 'png', 'jpeg')
    //          文档('xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt')
    //          压缩包('zip', 'rar')  发票('pdf', 'jpg', 'png', 'jpeg', 'doc', 'docx', 'zip', 'rar')
    //          PDF(pdf)
    //          委托代征协议('pdf','jpg', 'png', 'jpeg')
    //          我的任务('jpg', 'png', 'jpeg','pdf','xlsx', 'xls', 'pdf', 'doc', 'docx','zip', 'rar' )
    // eg:
    //    当值为string类型时，对所有（card1,card2,card3）的有效；
    //    当值为对象（{"card1":'图片',"card2":'文档', "card3":'PDF'}）时，可指定每个（card1/card2/card3）所对应的类型
    type: '委托代征协议',
    // 允许上传的文件个数  默认值为1
    // eg: 1 表示只允许上传1个文件；
    //      当值为对象（{"card1":1,"card2":2, "card3":3}）时，可指定每个（card1/card2/card3）所对应的类型
    size: 1,
    // 上传的单个文件大小 单位为 MB  默认值为1
    //  eg: 当值为 number 时，对所有（card1,card2,card3）的有效；
    // 当值为对象（{"pdf":5,"xlsx":10, "zip":100}）时,可指定对应的文件类型的大小（单位：MB）
    singleFileSize: 10,
  },
}
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'ChannelInformationAuthentication',
  components: {},
  props: {
    dataInfo: {
      type: Object,
    },
    closeEvent:{type:Function}
  },
  data() {
    // 这里存放数据
    return {
      mode2: ['month', 'month'],
      carouselDots:false,
      upLoadFRSFZ: { isHas: true, icon: 'check-circle', color: '#87d068' }, //check-circle  #87d068       close-circle  #f50
      smsjrz: { isHas: true, icon: 'close-circle', color: '#f50' }, //check-circle  #87d068       close-circle  #f50
      upLoadConfig,
      uploadFileModel: {},
      uploadFileDate:[],
      showBack:true,
      config:{
        cardStatus:0, // 	身份证完成状态 0-否 1-是
        phoneStatus:0, // 手机号完成状态 0-否 1-是
        pageType:0,
        btnType:'1',  // 1  立即认证  2 立即认证
        btnLabel:'立即认证',
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    dataInfo: {
      handler(val) {
        this.setData4Config(val)
      },
      deep: true,
      immediate: true
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    handlePanelChange2(value, mode) {
      // console.log('@@@@@@@@@@@@@@@@@2',value, moment(value[0],'YYYY-MM').format('YYYY-MM'), moment(value[1],'YYYY-MM').format('YYYY-MM')); // moment('01/01/2015', dateFormatList[0])
      this.uploadFileDate = [value[0].format('YYYY-MM'), value[1].format('YYYY-MM')];
      this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
    },
    setData4Config(config){
      const setData = (key,Status)=>{
        const tempAction = {
          0:{icon: 'close-circle', color: '#f50'},
          1:{icon: 'check-circle', color: '#87d068'}
        }
        this[key] = { isHas: true, ...tempAction[Status] }
      }
      if(config){
        this.config = config
        setData('upLoadFRSFZ',config.cardStatus)
        setData('smsjrz',config.phoneStatus)

        this.$nextTick(()=>{
          this.goto(config.pageType)
          this.carouselDots = this.showBack = config.pageType == 1?false:true
        })
      }
    },
    goto(index){
      this.$refs['carouselcon'].goTo(index)
      if(index==0){
        this.dataInfo.event('邀请负责人线上签约')
      }
      if(index==1){
        this.dataInfo.event('上传纸质委托代征协议')
      }
    },
    authenticateEvent(){
      this.$router.push({
        path: '/registerProcess/registerProcess',
        query: {
          tab: 1, // 1 上传法人身份证      2  法人实名手机认证
        }
      });
    },
    saveFile(){
      // this.$message.warning('当前功能缺少接口支持！')
      const {uploadFileModel,uploadFileDate} = this
      // const res =  this.$refs['uploadFileModelwtdzxy'].getDataCheckRes() // {card1:'请上传委托代征协议'}

      if(this.isType.isEmpty(uploadFileModel.card1.url)){
        this.$message.warning('请上传委托代征协议')
        return false
      }
      if(uploadFileDate.length!=2){
        this.$message.warning('请选择有效期')
        return false
      }
      const param = {
        entId:this.dataInfo.entId,
        agreeList:[{
          "fileName": uploadFileModel.card1.name,
          "fileUrl": uploadFileModel.card1.url,
          "valEdate": uploadFileDate[1]+'-01',
          "valSdate": uploadFileDate[0]+'-01'
        }]
      }
      console.log('#########',param);
      getDataForDB('上传委托代征协议',param).then(res=>{
        if(res.code == 200){
          this.$message.success('委托代征协议上传成功！')
          this.closeEvent('Refresh')
        }else{
          this.upLoadConfig.defaultFileList.card1 ={ name: '', url: '' }
          this.uploadFileDate = []
          this.$message.warning(res.message||'委托代征协议上传失败！')
        }
      })
    }
  },
}
</script>
<style lang="less" scoped>
.Channel-Information-Authentication-con {

  .carousel-item-data {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    .item-row {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      padding: 10px 20px;
      .title {
        width: 100%;
        // font-weight: bold;
        font-size: 18px;
      }
      .key{
        flex: 1;
        height: 100%;
      }
      .val{
        flex: 4;
        height: 100%;
      }

      .item-box {
        border: 1px solid rgb(187, 187, 187);
        border-radius: 10px;
        width: 250px;
        height: 260px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        padding: 10px 20px;
        .btn-size {
          width: 200px;
        }

        .box-title {
          width: 100%;
          flex: 1;
          font-weight: bold;
          font-size: 17px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .box-body {
          width: 100%;
          flex: 2;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          .box-data-item {
            width: 100%;
            padding: 5px 0;
            font-size: 14px;
            color: #8b8484;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
      &.key-val{
        flex-direction: row;
      }
      &.item-row-r {
        flex-direction: row;
        justify-content: space-around;
      }
      &.item-row-btn {
        padding: 10px 100px;
      }
      &.item-row-line{
        flex-direction: row;
        justify-content: center;
        margin-top: 30px;
        // padding-right: 120px;
        .btn-size {
          width: 200px;
        }
      }
    }
  }
}
  /deep/.ant-carousel .slick-dots-bottom{
    display: none !important;
  }
</style>
<style scoped>
.btn-size-m{
  margin: 0 5px;
}
.ant-carousel >>> .slick-slide {
  /* text-align: center; */
  height: 400px;
  /* line-height: 400px; */
  /* background: #364d79; */
  overflow: hidden;
}

</style>
